<template>
  <div style="padding: 0px 25px;">
    <div v-if="list.length">
      <div v-for="(item2, index2) in list" :key="index2">
        <div class="title">{{ item2.CerName }}</div>
        <div class="content">
          <el-descriptions :column="4" border>
            <el-descriptions-item v-for="(item, index) in descriptionsList" :key="index" :label="item" label-class-name="my-label" content-class-name="my-content" :content-style="item === '法定代表人'?{'color': '#0087FE'}:{}" :label-style="{ background: '#F5FAFF', color: '#6D6D6D', textAlign: 'center' }">
              {{ item2[index] }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </div>
    <div v-else style="background-color: #fff;"><el-empty description="暂无数据" /></div>
  </div>
</template>
<script>
import { getPerProfeCers } from '@/api/person'

export default {
  name: 'Certificate',
  props: {
    personId: { type: String, default: null }
  },
  data() {
    return {
      descriptionsList: {
        CerAwardUnit: '颁发机构',
        CerNumber: '证书编号',
        CerMajor: '专业',
        CerEnOn: '有效期',
        CerAwardDate: '发证日期'
      },
      companyInfos: {},
      listQuery: {
        personId: ''
      },
      list: []
    }
  },
  watch: {
    'activeName': {
      immediate: true,
      handler(newVal, oldValue) {
        this.activeName = newVal
      }
    }
  },
  created() {
    this.listQuery.personId = this.personId
    this.getPageList()
  },
  methods: {
    // 获取表格数据
    getPageList() {
      // 、、 职称证书
      getPerProfeCers(this.listQuery).then((res) => {
        res.data.ProfeCertificates.forEach(element => {
          // 再循环对象
          for (const i in element) {
            if (element[i] == null) {
              element[i] = '--'
            }
          }
        })
        this.list = res.data.ProfeCertificates
      })
    }
  }
}
</script>

<style scoped>
.title{
  color: #404040;
  font-size: 16px;
  margin: 24px 0;
  padding-left: 10px;
  position: relative;
}
.title::before {
  content: "";
  width: 3px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #0087FE;
}
.content{
  margin: 24px 0;
}
</style>
